.jujiBox {
  @apply absolute flex flex-col;
  right: 3.75rem;
  bottom: 5rem;
  border-radius: 0.625rem;
  background-color: rgba(37, 37, 37, 0.95);
  z-index: 11;

  &.jujiPhone {
    right: 0;
    height: calc(100vh - 6.25rem);
    width: 25rem;
  }

  &.thrid {
    .jujiContent {
      padding-right: 0.8125rem;
    }
  }

  .vipBox {
    @apply ml-5 mt-5 flex items-center;
    width: 28.875rem;
    height: 2.625rem;
    border-radius: 2.4.3125rem;
    background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);

    .img2 {
      @apply mr-4;
      width: 0.875rem;
      height: 0.875rem;
      margin-left: 0.625rem;
    }

    .img1 {
      @apply ml-3;
      width: 1.125rem;
      height: 1.125rem;
      margin-right: 0.625rem;
    }

    .span {
      @apply text-sm;
      color: #7c3c19;
    }

    .btn {
      @apply bg-theme text-white;
      width: 5.5rem;
      height: 1.875rem;
    }
  }

  .jujiTitle {
    @apply flex items-center justify-between px-5 mt-5 mb-2;

    .p {
      @apply text-base text-white;
      line-height: 1.125rem;
    }

    .titlePanel {
      @apply flex;

      .linePanel {
        @apply flex items-center cursor-pointer relative text-xs border border-solid justify-center;
        border-color: #fff;
        color: rgba(255, 255, 255, 0.9);
        line-height: 0.875rem;
        width: 5.625rem;
        height: 1.875rem;

        &:first-child {
          @apply mr-5;
        }

        &:hover {
          .selectBox {
            @apply block;
          }

          & > img {
            transform: rotate(90deg);
          }
        }

        & > span {
          @apply mr-3;
        }

        & > img {
          width: 7.4.125rem;
          height: 13.1.375rem;
          transform: rotate(-90deg);
          transition: all 0.3s;
        }

        .selectBox {
          @apply hidden absolute right-0 w-full rounded overflow-y-auto bg-bg25 rounded py-3;
          top: 1.875rem;
          max-height: 14.25rem;
          z-index: var(--content-index);
          box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);

          &::-webkit-scrollbar {
            @apply w-1;
          }

          &::-webkit-scrollbar-thumb {
            @apply rounded;
            background-color: #4c4c4c;
          }

          .cTypeItem {
            @apply text-xs w-full h-10 leading-10 flex items-center bg-transparent;
            padding-left: 0.625rem;
            font-family: Alibaba PuHuiTi 2;

            &:hover {
              @apply cursor-pointer text-theme bg-bg33;
              background-color: #313131;
            }

            .vipBiaoshi {
              @apply inline-block w-6 h-3;
              margin-left: 0.125rem;
            }

            &.typeItemActive {
              @apply text-theme;
            }

            &.typeItemVip {
              .span {
                @apply leading-3;
                line-height: 0.75rem;
                font-feature-settings: 'kern' on;
                background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
              }
            }
          }
        }
      }
    }
  }

  .jujiContent {
    @apply flex-1 overflow-y-auto;
    margin-top: 1.375rem;

    &::-webkit-scrollbar {
      width: 0.25rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #4c4c4c;
    }

    .contentEporder {
      @apply h-10 rounded inline-block text-center leading-10 text-white-60;
      margin-right: 0.4375rem;
      margin-bottom: 0.4375rem;
      width: 5.375rem;
      background: #3e3e3e;

      &:hover {
        background: #313131;
      }

      &.active {
        @apply text-theme;
      }
    }

    .contentVipEporderBox {
      @apply px-5 py-3 mb-5 cursor-pointer;
      transition: all 0.2s;
      min-height: 1.875rem;
      font-family: Alibaba PuHuiTi 2;

      & > * {
        @apply opacity-80;
      }

      &.eporderBoxActive {
        background-color: #3e3e3e;

        .contentVipEporder {
          @apply opacity-100;
        }

        .contentVipEporderDesc {
          margin-top: 0.625rem;
          max-height: 37.5rem;
        }
      }

      .contentVipEporder {
        @apply w-full flex h-4 justify-between text-sm text-white;
        line-height: 0.875rem;

        &.active {
          @apply text-theme opacity-100;
        }

        &.normal {
          @apply opacity-100;

          span {
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }
        }

        .vipEporderTitle {
          @apply mr-10 flex items-center justify-between;
          width: calc(100% - 3.75rem);

          & > span:first-child {
            @apply mr-2;
          }
        }

        .vipImg {
          @apply w-5 h-5 flex items-center justify-center;

          & > img {
            @apply w-3 h-3;
          }
        }
      }

      .contentVipEporderDesc {
        @apply text-white-80 text-xs overflow-y-hidden;
        transition: all 0.2s;
        line-height: 1.375rem;
        max-height: 0;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .jujiBoxPhone {
    @apply fixed w-screen h-screen left-0 top-0 z-10 flex flex-col;
    background-color: rgba(37, 37, 37, 1);
    animation: alls 0.3s ease;

    .jujiTitle {
      @apply flex items-center justify-between px-5 mt-5 mb-2;

      .title {
        @apply flex text-base items-center justify-center text-white;

        & > img {
          margin-left: -0.5rem;
          margin-right: 0.25rem;
          height: 1.375rem;
          width: 1.375rem;
          transform: rotate(90deg);
        }
      }

      .titlePanel {
        @apply flex;

        .linePanel {
          @apply flex items-center cursor-pointer relative text-xs border border-solid justify-center;
          border-color: #fff;
          color: rgba(255, 255, 255, 0.9);
          line-height: 0.875rem;
          width: 5.625rem;
          height: 1.875rem;

          &:first-child {
            @apply mr-5;
          }

          &:hover {
            .selectBox {
              @apply block;
            }

            & > img {
              transform: rotate(90deg);
            }
          }

          & > span {
            @apply mr-3;
          }

          & > img {
            width: 7.4.125rem;
            height: 13.1.375rem;
            transform: rotate(-90deg);
            transition: all 0.3s;
          }

          .selectBox {
            @apply hidden absolute right-0 w-full rounded overflow-y-auto bg-bg25 rounded py-3;
            top: 1.875rem;
            max-height: 14.25rem;
            z-index: var(--content-index);
            box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);

            &::-webkit-scrollbar {
              @apply w-1;
            }

            &::-webkit-scrollbar-thumb {
              @apply rounded;
              background-color: #4c4c4c;
            }

            .cTypeItem {
              @apply text-xs w-full h-10 leading-10 flex items-center bg-transparent;
              padding-left: 0.625rem;
              font-family: Alibaba PuHuiTi 2;

              &:hover {
                @apply cursor-pointer text-theme bg-bg33;
                background-color: #313131;
              }

              .vipBiaoshi {
                @apply inline-block w-6 h-3;
                margin-left: 0.125rem;
              }

              &.typeItemActive {
                @apply text-theme;
              }

              &.typeItemVip {
                .span {
                  @apply leading-3;
                  line-height: 0.75rem;
                  font-feature-settings: 'kern' on;
                  background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  background-clip: text;
                  text-fill-color: transparent;
                }
              }
            }
          }
        }
      }
    }

    .jujiContent1 {
      @apply overflow-y-auto w-full flex flex-wrap pl-4 mt-4;

      .juji {
        @apply rounded-sm relative block mr-3 mb-3;
        width: calc(calc(100vw - 4.25rem) / 4);
        height: 3.125rem;
        background: linear-gradient(0deg, #3a3426 0%, #333333 100%);

        & > img {
          @apply absolute right-0 bottom-0 object-contain opacity-60;
          width: 2.75rem;
          height: 1.125rem;
        }

        & > span {
          @apply absolute left-2/4 top-2/4 text-base;
          transform: translate(-50%, -50%);

          &.active {
            @apply text-theme;
          }

          &.normal {
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }
        }
      }

      .jujiNormal {
        @apply rounded-sm relative block mr-3 mb-3 text-base text-white text-center;
        width: calc(calc(100vw - 4.25rem) / 4);
        height: 3.125rem;
        line-height: 3.125rem;
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
  }
}
